/*一些自定义样式*/
@import "variables.scss";
@import "function.scss";
html,body{
    font-size: 20px;
}
.app-header{
    font-size: pxtorem(20);
    height: pxtorem(48);
    // box-shadow: 0px 1px 2px $color-gray;
    border-bottom: 1px solid $color-gray;
    display: flex;
    align-items: center;
    color: $color-lightblack;
}
.header-dark{
    background-color: $color-lightblack;
    color: $color-white;
    border: none;
}
div[order-confirm]{
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
div[order-detail]{
    position: absolute;
    width: 100%;
    background-color: #ffffff;
    z-index: 101;
    top: 0;
}
div[order-table]{
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    height: 100%;
}
div[order-combo-detail]{
    height: 85vh;
}
div[table-detail]{
    .md-sidenav-content{
        display: flex;
        flex-direction: column;
    }
}

div[table]{
    .md-sidenav-content{
        display: flex !important;
        flex-direction: column;
    }
}
.remark-content{
    height: 450px;
}
.remark-list{
    margin: pxtorem(3);
}
.header-logo{
    width: pxtorem(35);
    height: pxtorem(35);
}
.tag{
    padding-left:pxtorem(4);
    padding-right:pxtorem(4);
    font-size: pxtorem(12);
    color: $color-lightblack;
    border: 1px solid #cccccc;
    border-radius: pxtorem(4);
    min-height: pxtorem(24);
    margin-right: pxtorem(8);
    margin-bottom: pxtorem(8);
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
}
.tag-plus{
    padding:pxtorem(4) pxtorem(10);
    font-size: pxtorem(12);
    color: $color-lightblack;
    border: 1px solid #cccccc;
    border-radius: pxtorem(4);
    min-height: pxtorem(24);
    margin-right: pxtorem(8);
    margin-bottom: pxtorem(8);
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
}
.table-container{
    padding: 0 pxtorem(16) pxtorem(16) pxtorem(16);
    .table-name{
        overflow: hidden;
        font-size: pxtorem(16);
    }
    .table-item{
        position: relative;
        width: pxtorem(88);
        height: pxtorem(88);
        border-radius: pxtorem(8);
        margin-top: pxtorem(16);
        background-color: $color-lightgray;
        // box-shadow: 0 0 5px $color-lightgray;
        color: $color-white;
        .table-item-data{
            height: pxtorem(20);
            border-top: 1px solid rgba(255,255,255,0.6);
            overflow: hidden;
            .table-item-icon{
                margin-right: pxtorem(4);
                margin-left: pxtorem(4);
            }
        }
        .table-item-info{
            padding: pxtorem(4);
        }
        .table-creator{
            margin-right: pxtorem(4);
        }
    }
    .table-margin{
        margin-left: pxtorem(12);
    }
    .table-margin-rest{
        margin-left: 0;
    }
    .table-open{
        background-color: $color-warn;
    }
    .table-preset{
        background-color: #4ca5ff;
    }
    .table-cleaning{
        background-color: #22b516;
        .ico-besom{
            font-size: pxtorem(40);
            position: absolute;
            top: pxtorem(25);
            right: pxtorem(10);
        }
    }
    .table-status-box{
        position: absolute;
        right: 0;
        top: 0;
        .table-status-mark{
            color: $color-white;
            width: pxtorem(20);
            height: pxtorem(20);
            border-radius: 0 pxtorem(8) 0 pxtorem(12);
        }
        .table-presettled{
            background-color: #E8AF00;
        }
    }
    
}
.online-tip{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.2);
    color: $color-white;
    .online-mask{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 0;
    }
}
.confirm-content{
    font-size: pxtorem(16) !important;
}
.confirm-btn{
    height: pxtorem(48) !important;
    >span{
        font-size: pxtorem(16);
    }
}
.load-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(153, 153, 153, 0.5);
    z-index: 9999;
    .load-mask-content{
        width: pxtorem(120);
        height: pxtorem(80);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        // box-shadow: 0 0 10px $color-gray;
        background-color: $color-whitegray;
        border-radius: pxtorem(8);
    }
    .load-mask-icon{
        width: pxtorem(28);
        height: pxtorem(28);
    }
}
.normal-btn{
    height: pxtorem(50);
}
.border-bottom{
    border-bottom: 1px solid $color-gray;
}
.corner-mark{
    position: absolute;
    width: pxtorem(20);
    height: pxtorem(20);
    top: 5px;
    right: 5px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: pxtorem(12);
}
/*字体大小层叠样式*/
.text-l{
    font-size: pxtorem(24) !important;
}
.text-m{
    font-size: pxtorem(20) !important;
}
.text-s{
    font-size: pxtorem(15) !important;
}
.text-gt-s{
    font-size: pxtorem(16) !important;
}
.text-xs{
    font-size: pxtorem(12) !important;
}
.header-icon{
    font-size: pxtorem(24);
}
.header-confirm{
    font-size: pxtorem(16);
    flex-shrink: 0;
}
.text-icon-m{
    font-size: pxtorem(100) !important;
}
/*间距设置*/
.content-btn{
    height: pxtorem(40);
}
.margin{
    margin: pxtorem(16);
}
.margin-s{
    margin: pxtorem(12);
}
.margin-l{
    margin-left: pxtorem(16);
}
.margin-r{
    margin-right: pxtorem(16);
}
.margin-l-s{
    margin-left: pxtorem(12);
}
.margin-r-s{
    margin-right: pxtorem(12);
}
.margin-l-xs{
    margin-left: pxtorem(8);
}
.margin-l-xxs{
    margin-left: pxtorem(5);
}
.margin-r-xs{
    margin-right: pxtorem(8);
}
.margin-t-xs{
    margin-bottom: pxtorem(8);
}
.padding{
    padding: pxtorem(16);
}
.padding-l{
    padding-left: pxtorem(16);
}
.padding-r{
    padding-right: pxtorem(16);
}
.padding-s{
    padding: pxtorem(12);
}
.padding-tb-s{
    padding-top: pxtorem(12);
    padding-bottom: pxtorem(12);
}
.padding-l-s{
    padding-left: pxtorem(12);
}
.padding-r-s{
    padding-right: pxtorem(12);
}
.padding-xs{
    padding: pxtorem(8);
}
.padding-l-xs{
    padding-left: pxtorem(8);
}
.padding-r-xs{
    padding-right: pxtorem(8);
}
.h100{
    height: 100%;
}
/*位置布局*/
.position-box{
    position: relative;
}

.position-center-y{
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
}
.position-center-x{
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
}
.position-center{
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.v-gap{
    margin-top: pxtorem(12) !important;
}
.v-gap-s{
    margin-top: pxtorem(8) !important;
}
.v-gap-xs{
    margin-top: pxtorem(4) !important;
}
.h-gap{
    margin-left: pxtorem(15) !important;
}
.v-scroll{
    overflow-x: hidden;
    overflow-y: auto;
}
/*其他公用样式*/
.opacity-0{
    opacity: 0;
}
.hideself{
    display: none !important;
}
.fl-right{
    float: right;
}
.pickup-sign{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: pxtorem(40);
    height: pxtorem(40);
    border-radius: 50%;
    border: 1px solid $color-warn;
    color: $color-warn;
}
.side-text{
    font-size: pxtorem(17);
}

.border-primary{
    border: 1px solid $color-primary;
}
.break-word{
    word-wrap: break-word !important;
}
.over-hidden{
    overflow: hidden;
}
.text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.border-box{
    box-sizing: border-box;
}
.outscreen{
    position: fixed;
    top: 999999px;
}